<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
		        margin: 0;
		        padding: 0;
		        list-style: none;
			}
			.flip-container {
			     width: 283px;
			     height: 283px;
			     margin: 0px auto;
			     transition: transform .5s ease-in-out;
			     position: relative;
			
			     /*父类容器中 perspective 子类允许透视*/
			     perspective: 1000px;
			     /*使其子类变换后得以保留 3d转换后的位置*/
			     transform-style: preserve-3d;
			}
			.front,.back {
			     width: 100%;
			     height: 100%;
			
			     /*背景不穿透，表示翻转后便看不到正面*/
			     -webkit-backface-visibility: hidden;
			     backface-visibility: hidden;

			
			     transition: 0.6s ease-out;
			     position: absolute;
			     top: 0;
			     left: 0;
			 }
			 .front img,.back img {
			     width: 283px;
			     height: 283px;
			     overflow: hidden;
			 }
			 .front {
			     transform: rotateY(0deg);
			 }
			 .back {
			     transform: rotateY(-180deg);
			 }
			
			 /*鼠标移动覆盖时，触发翻转*/
			 .flip-container:hover .back {
			     transform: rotateY(0deg);
			
			 }
			 .flip-container:hover .front {
			     transform: rotateY(180deg);
			
			 }
		</style>
	</head>
	<body>
		<div class="flip-container">
		    <a class="flipper">
         <div class="front"><img src="img/22.png">前面</div>
         <div class="back"><img src="img/23.png">后面</div>
     </a>
 </div>
	</body>
</html>
